<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">过程任务</el-breadcrumb-item>
            <el-breadcrumb-item>我的发布</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">我的发布</h2>

        <div style="margin: 3% 5% 3% 5%;">
            <h1>我的发布</h1><el-button type="primary" @click="toprocessPublish" style="background-color: #545c64;">发布任务</el-button>
            <div style="margin-top:2%;"><!-- 收到的小队邀请 -->
                <el-table :data="processTask" height="550" border stripe style="width: 100%; ">
                    <el-table-column prop="processName" label="任务名称" />
                    <el-table-column prop="startDate" label="开始时间" :formatter="formatDate"/>
                    <el-table-column prop="endDate" label="截止时间" :formatter="formatDate"/>
                    <el-table-column prop="className" label="班级" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="toPost(scope.row.processId)">查看</el-button>
                            <el-button link type="danger" size="small" @click="toDelete(scope.row.processId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import requests from '@/api/ajax';


const router_useRouter = useRouter()

//获取任务详情的参数并跳转到任务详情页
function toPost(processId) {
  router_useRouter.push({
    path: 'outProDetail',
    query: { publishId: processId }
  })
}

onBeforeMount(() => {
        const asd = requests({ url: "/outer/myouterProcessTask", method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        const abc = res.rdata
        processTask.value = abc

      })
        .catch(err => {
          console.error(err.data);
          // 登录请求失败后的操作
        });
})

//页面跳转到发布


function toprocessPublish() {
    router_useRouter.push({ path: 'outProPublish' })
}
function toprocessClass() {
    router_useRouter.push({ path: 'outProDetail' })
}

//老师发布的过程任务
const processTask = ref([
    {
        processId: '',
        processName: "",
        processType: '',
        startDate: "",
        endDate: "",
        content: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: "",
        practicalType: '',
        onloadDate: ""
    }
])

//时间格式化
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  return format
}


//删除过程任务
const toDelete = (processId) => {
  ElMessageBox.confirm(
    '是否确认删除？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      const getStu = requests({ url: "/inner/ProcessTask/" + processId, method: "delete", }).then(res => {
        //存储用户信息到浏览器toke
        if (res.code === 20021) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })

          const asd = requests({ url: "/outer/myouterProcessTask", method: "get", }).then(res => {
            //存储用户信息到浏览器toke
            const abc = res.rdata
            processTask.value = abc

          })
            .catch(err => {
              console.error(err.data);
              // 登录请求失败后的操作
            });
        } else {
          getStuStatus.value = null
        }


      })
        .catch(err => {
          console.error(err);
          // 登录请求失败后的操作
        });
    })

}
</script>